<template>
	<view class="p30">
		<text class="f36 bold">{{deviceData.nickName}}</text>
		<view class="mtb40">
			<u-swiper :list="bannerList" :radius="10" :height="150" img-mode="scaleToFill"></u-swiper>
		</view>
		<view class="shake-protect pt30">
			<!-- <view class="title">
				防护等级：{{levelText}}
			</view> -->
			<view class="flex-between-center" style="padding:0px 18px">
				<text style="color: #FDBB42;" class="f24">低</text>
				<text style="color: #07B7F2;" class="f24">高</text>
			</view>
			<slider v-model="value" style="margin-top:0" :min="0" :max="99" :step="33" :block-size="30"
				block-color="#06B7F3" backgroundColor="#ffffff" @change="setLevelText"
				:activeColor="'linear-gradient(90deg, #FEBB41 0%, #06B7F3 220%);'"></slider>

		</view>
		<view class="flex-center">
			<view class="c-info f20 mt80 flex-align-center">
				<view class="c-danger mr4">*</view>防护等级越高，车辆越容易触发震动防护
			</view>
		</view>
		<view class="flex-center">
			<view style="width: 150px;" class="mt100">
				<u-button type="primary" text="设置" :throttleTime="1000" @click="sendCodeFun"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		send4GControlAPI,
	} from "@/api/api/communicate"
	import {
		getStoreSyncUtil
	} from "@/utils/store.js"
	import {
		getBannerAPI
	} from "@/api/api/my"
	import {
		startOperateBluetooth,
	} from "@/static/bluetooth/core.js"
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				bannerList: [
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/5.png',
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/4.png',
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/6.png',
				],
				vibrationData: 0, //0，1=低、2=中、3=高
				value: 0,
				activeColor: "linear-gradient(90deg, #FEBB41 0%, #06B7F3 220%);",
				levelText: '低',
				levels: {
					0: {
						label: '低',
						value: 0,
					},
					33: {
						label: '中低',
						value: 1,
					},
					66: {
						label: '中',
						value: 2,
					},
					99: {
						label: '高',
						value: 3,
					},
				}
			}
		},
		computed: {
			...mapState(["deviceData", "isConnected", "shakeValue"])
		},

		onLoad() {
			getBannerAPI().then(([err, data]) => {
				if (err) return;
				let list = data.records;
				if (list.length) {
					let bannerList = [];
					list.forEach((item) => {
						bannerList.push(item.link);
					})
					this.bannerList = bannerList;
				}
			});
			if (!this.$validatenull(this.shakeValue)) {
				this.value = this.shakeValue[this.deviceData.id];
			}

			this.levelText = (this.levels[this.value] && this.levels[this.value].label) || '';
		},
		methods: {
			changing(val) {
				this.activeColor = `linear-gradient(90deg, #FEBB41 0%, #06B7F3 ${220-val}%)`;
			},
			parsePacketCallback(flag) {
				uni.hideLoading();
				uni.showToast({
					title: flag ? "操作成功" : "操作失败",
					icon: 'none',
					mask: true
				})
			},
			setLevelText(val) {
				console.log("val", val);
				this.value = val.detail.value;
				this.levelText = (this.levels[this.value] && this.levels[this.value].label) || '';
			},

			sendCodeFun: throttle(function() {
				this.vibrationData = (this.levels[this.value] && this.levels[this.value].value);
				this.shakeValue[this.deviceData.id] = this.value;
				this.$store.commit("setShakeValue", this.shakeValue);
				if (this.isConnected) {
					startOperateBluetooth("设置中", 1006, this.parsePacketCallback, () => {}, this.vibrationData)
				} else {
					send4GControlAPI({
						deviceId: this.deviceData.id,
						commandCode: "SET_CAR_VIBRATION_DATA",
						sendParams: JSON.stringify({
							vibrationData: this.vibrationData
						})
					}).then(([err, data]) => {
						if (err) return;
						this.$showToast('设置成功');
					});
				}
			})

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
</style>

<style>
	.slider-wraper {
		width: 100%;
	}

	wx-slider .wx-slider-handle-wrapper {
		height: 28px;
		border-radius: 14px;
		box-shadow: 0px 4rpx 30rpx 0px rgba(165, 189, 251, 0.4);
	}

	wx-slider .wx-slider-track {
		border-radius: 14px 0px 0px 14px;
		background: linear-gradient(90deg, #FEBB41 0%, #06B7F3 220%);
		box-sizing: border-box;
		border: 2px solid #fff;
	}

	wx-slider .wx-slider-handle,
	wx-slider .wx-slider-thumb {
		box-sizing: border-box;
		border: 2px solid #fff;
	}
</style>
